<!-- 
 * 上传下载组件
 * @author: 
 * @since: 2022-05-19
 * index.vue
-->
<template>
  <div class="uploadDownload-container">
    <div class="download">
      <div class="title">
        <svg-icon name="download" size="18px" color="#AFB9D2"></svg-icon>
        <span class="word">下载模版</span>
      </div>
      <div class="tip">为提高导入的成功率，请下载并使用系统提供的模版</div>
      <el-button size="large" class="download-btn" @click="downloadTemplate">下载模板</el-button>
    </div>
    <div class="upload">
      <div class="title">
        <svg-icon name="upload" size="18px" color="#AFB9D2"></svg-icon>
        <span class="word">上传文件</span>
        <div class="tip">仅支持xlsx，xls</div>
      </div>
      <div class="uploadBtn">
        <el-upload :multiple="false" :http-request="uploadHttpRequest" :show-file-list="false" :before-upload="checkFile">
          <el-button type="primary" size="large" class="leadFile">文件导入</el-button>
        </el-upload>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'
import { ElMessage } from 'element-plus'


const emits = defineEmits(['downloadTemp', 'upload'])

//下载模版
const downloadTemplate = () => {
  emits('downloadTemp');
}

//上传文件
const uploadHttpRequest = (data) => {
  emits('upload', data);
}

//选择文件
const checkFile = (data) => {
  let index = data.name.lastIndexOf('.')
  let type = data.name.slice(index+1)
  if (type != 'xlsx' &&type != 'xls') {
    ElMessage.error('不是合法的文件格式')
    return false
  }
}

</script>

<style lang="scss" scoped>
.uploadDownload-container {
  .title {
    .word {
      font-size: 16px;
      font-weight: 600;
      color: #333333;
      margin-left: 10px;
    }
  }
  .tip {
    font-size: 12px;
    color: #666666;
    margin: 10px 0 20px 0;
  }
  .download {
    .download-btn {
      width: 120px;
      border: 1px solid #00a2ff;
      color: #00a2ff;
      font-weight: bold;
      font-size: 16px;
      &:hover {
        background: transparent;
      }
    }
  }
  .upload {
    margin-top: 30px;
  }
  .leadFile {
    width: 120px;
    color: #fff;
    font-weight: bold;
    background: #00a2ff;
    border: transparent;
    font-size: 16px;
    &:hover {
      background: #00a2ff;
      border: transparent;
    }
  }
}
</style>
